<template>
  <div>
    <!-- 标题 -->
    <h4 class="text-center">用户基本信息管理</h4>
    <div>
      <button type="button" class="btn btn-outline-secondary" @click="addEmployee">添加</button>
    </div>

    <!-- 用户列表 -->
    <table class="table table-bordered table-striped table-hover">
      <thead>
        <tr>
          <th>工号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>职位</th>
          <th>部门</th>
          <th>入职日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in userlist" :key="item.id">
          <td>{{ item.e_ID }}</td>
          <td>{{ item.e_NAME }}</td>
          <td>{{ genderlist[item.e_GENDER] }}</td>
          <td>{{ joblist[item.e_JOB] }}</td>
          <td>部门{{ item.e_DEPARTMENT }}</td>
          <td>{{ item.e_START }}</td>
          <td>
            <button type="button" class="btn btn-outline-primary" @click="gotoDetail(item.e_ID)">详情</button>
            <button type="button" class="btn btn-outline-danger" @click="delUser(item.e_ID)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'MyUser',
  data() {
    return {
      // 用户列表数据
      userlist: [
        { id: 1, name: '张三', age: 18, position: '快递员' },
        { id: 2, name: '张四', age: 18, position: '外卖员' },
        { id: 3, name: '张五', age: 19, position: 'Boss' },
        { id: 4, name: '老六', age: 22, position: '老六' }
      ],
      genderlist: [
        '女', '男'
      ],
      joblist: [
        '员工', '部门经理', '人事部职员', '总经理'
      ]
    }
  },
  mounted() {
    this.getUserlist();
  },
  methods: {
    getUserlist() {
      axios.get('/api/personnel').then(res => {
        console.log(res.data)
        this.userlist = res.data.data
      })
    },
    gotoDetail(id) {
      // console.log('ok')
      this.$router.push('/home/userinfo/' + id)
      console.log(this);
    },
    addEmployee() {
      this.$router.push('/home/addUser/')
      console.log(this);
    },
    delUser(id) {
      console.log(id)
      axios.delete('/api/personnel/' + id).then(res => {
        console.log(res.data)
        if (res.data.data == true) {
          alert("删除成功")
          this.getUserlist()
        } else {
          alert("该用户不存在")
        }
      }).catch(err => {
        alert("删除失败 " + err.message)
        console.log(err.message)
      })
    },
  }
}
</script>

<style lang="less" scoped></style>
